{% extends 'homepage.html' %}
{% block content %}  

<h1>Register</h1>

<form name="login" action="{{ url_for('.register_token', token=token) }}" method="post">
  <input type="hidden" name="next" value="{{ next }}" />
  <table>
    <tr><td>Login ID:</td><td><input name="name" /></td></tr>
    <tr><td colspan="2" class="forminfo">You cannot change your Login ID later. Please avoid spaces, special characters, …</td></tr>
    <tr><td colspan="2" class="spacing" /></tr>
    <tr><td>Password:</td>
        <td><input id="pw1" name="password1" type="password" /></td></tr>
    <tr><td>Password (repeat):</td>
        <td><input id="pw2" name="password2" type="password" /></td></tr>
    <tr><td class="forminfo">Matching?</td>
        <td class="forminfo" id="pwstatus">empty</td></tr>
    <tr><td colspan="2" class="forminfo" style="color: red;">Don't use your usual password due to security concerns!</td></tr>
    <tr><td colspan="2" class="spacing" /></tr>
    <tr><td>Full Name:</td>
        <td><input name="full_name" size="30" /></td></tr>
    <tr><td></td><td class="forminfo">Visible to others, you can change it later.</td></tr>
    <tr><td>E-Mail:</td>
        <td><input name="email" size="30" /></td></tr>
    <tr><td colspan="2" class="spacing" /></tr>
    <tr><td/><td>
         <button name="submit" type="submit">Register</button>
         </td></tr>
  </table>
</form>


<script type="text/javascript">
/* this tells the user if the passwords match */

function checkpw() {
  var match = "False";
  if($("#pw1").val() == $("#pw2").val()) {
    match = "True";
  }
  $("#pwstatus").html(match);
}

$(function () {
  $("#pw1").keyup(function(evt) { evt.preventDefault(); checkpw(); });
  $("#pw2").keyup(function(evt) { evt.preventDefault(); checkpw(); });
  checkpw();
})
</script>


{% endblock %}


